<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import {
    editStaff,
    createStaff,
    deleteStaff,
  } from '@/api/organization/staff';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryList } from '@/api/organization/nursing-home';
  import {
    queryInstDeptList,
    queryInstPosition,
  } from '@/api/organization/department';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';
  import { ref } from 'vue';

  const form = useForm({
    state: {
      staffid: '',
      staffName: '',
      staffGender: '',
      staffPhone: '',
      branchId: '',
      deptId: '',
      positionIds: [],
      existFace: '',
      existFinerPrint: '',
      createTime: '',
    },
    rules: {
      staffName: [{ required: true, message: '请输入员工姓名' }],
      staffGender: [{ required: true, message: '请选择员工性别' }],
      staffPhone: [{ required: true, message: '请输入员工联系电话' }],
      branchId: [{ required: true, message: '请选择员工所在院区' }],
      deptId: [{ required: true, message: '请选择员工所在部门' }],
      positionIds: [{ required: true, message: '请选择员工职位' }],
    },
  });

  const isOpen = ref(false);

  const drawerModal = useDetailDrawerBinder({
    modalName: '员工',
    modes: ['detail', 'add', 'edit'],
    delete: true,
    deleteApi() {
      return deleteStaff(form.state.staffid);
    },
    deleteText: '提示：需要为该员工所服务的对象重新分配新的员工。',
    onShow(mode, otherParams) {
      isOpen.value = false;
      if (mode === 'add') {
        form.backToInit();
      } else {
        form.setFieldsValue(otherParams);
        form.state.positionIds = otherParams.positions.map(
          (e: any) => e.positionId
        );
      }
    },
    async onOkClick(mode) {
      await form.validate();
      if (mode === 'add') {
        return createStaff(form.state);
      }
      return editStaff(form.state);
    },
  });

  const branchSelectOptions = useSelectOption({
    name: '员工所在院区',
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
  });

  const deptSelectOptions = useSelectOption({
    name: '员工所在部门',
    tree: true,
    apiFun: queryInstDeptList,
    fieldNames: {
      value: 'deptId',
      label: 'name',
      children: 'subDeptList',
    },
  });

  const positionSelectOptions = useSelectOption({
    name: '员工职位',
    apiFun: queryInstPosition,
    fieldNames: {
      value: 'postionId',
      label: 'positionName',
    },
  });

  const onOpen = () => {
    isOpen.value = true;
  };

  defineExpose(drawerModal.expose);
</script>

<template>
  <detail-drawer v-bind="drawerModal.bindProps" @open="onOpen">
    <a-form
      v-bind="form.bindProps"
      :disabled="drawerModal.isShow('detail')"
      layout="vertical"
    >
      <a-row id="staff-detail" :gutter="16">
        <a-col :span="24">
          <a-form-item field="staffName" label="员工姓名">
            <a-input
              v-model="form.state.staffName"
              placeholder="请输入员工姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="staffGender" label="员工性别">
            <dict-select
              v-model="form.state.staffGender"
              type="Gender"
              placeholder="请选择员工性别"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="staffPhone" label="联系电话">
            <a-input
              v-model="form.state.staffPhone"
              placeholder="请输入员工联系电话"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="branchId" label="所在院区">
            <a-select
              v-model="form.state.branchId"
              v-bind="branchSelectOptions.bindProps"
              :style="{ width: '100%' }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="deptId" label="所在部门">
            <a-tree-select
              v-model="form.state.deptId"
              style="width: 100%"
              v-bind="deptSelectOptions.bindProps"
            ></a-tree-select>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="positionIds" label="员工职位">
            <a-select
              v-model="form.state.positionIds"
              :allow-search="false"
              multiple
              popup-container="#staff-detail"
              v-bind="positionSelectOptions.bindProps"
            />
          </a-form-item>
        </a-col>

        <template v-if="drawerModal.modeIs('detail')">
          <a-col :span="24">
            <a-form-item field="existFace" label="面部信息">
              <a-input
                v-if="form.state.existFace"
                model-value="已录入"
                readonly
              />
              <a-input v-else model-value="未录入" readonly />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item field="existFinerPrint" label="指纹信息">
              <a-input
                v-if="form.state.existFinerPrint"
                model-value="已录入"
                readonly
              />
              <a-input v-else model-value="未录入" readonly />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item field="createTime" label="创建时间">
              <a-input
                v-model="form.state.createTime"
                readonly
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less"></style>
